import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  Button
} from 'react-native';
import { StackNavigator} from 'react-navigation';

export default class MainScreen extends React.Component {
    static navigationOptions={
      title:'First',
    };
    render() {
      const {navigate}=this.props.navigation;
  
      let pic={
            uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
      };
      return (
        <View style={{flex:1,flexDirection:'column'}}>
           <Button 
            onPress={()=>navigate('Profile',{user:'Jack'})}
            title='跳转到ProfileScreen'
           />
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.android.js
          </Text>
          <Text style={styles.instructions}>
            Double tap R on your keyboard to reload,{'\n'}
            Shake or press menu button for dev menu
          </Text>
          <Image source={pic} style={{width:120, height:120}}/>
          <Greeting name='Jack'/>
          <Greeting name='Tom'/>
          <Blink text='I love to blink'/>
          <Blink text='yes blink is so great'/>
          <Blink text='look at me look at me'/>
          <Text style={styles2.bigblue}>just bigblue</Text>
          <Text style={styles2.red}>just red</Text>
          <Text style={[styles2.bigblue,styles2.red]}>bigblue,then red</Text>
          <Text style={[styles2.red,styles2.bigblue]}>red,then bigblue</Text>
        </View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
  });
  
  
  
  class Greeting extends Component{
    render(){
      return(
        <Text>Hello {this.props.name}!</Text>
      );
    }
  }
  
  class Blink extends Component{
    constructor(props){
         super(props);
         this.state={ showText: true};
  
         //每1000毫秒对showText取反一次
         setInterval(()=>{
            this.setState(previousState=>{
               return {showText : !previousState.showText};
            });
         },1000);
    }
  
    render(){
      let display=this.state.showText ? this.props.text : ' ';
      return ( 
        <Text>{display}</Text>
      );
    }
  }
  
  const styles2=StyleSheet.create({
    bigblue:{
       color:'blue',
       fontWeight:'bold',
       fontSize:30,
    },
    red:{
        color:'red',
    },
  });